<!DOCTYPE html>
<html>
  <head>
    <title>Hello, world!</title>
    <script type="text/javascript" src="../../d3.js"></script>
  </head>
  <body>
    Your lucky numbers are:<br>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <script type="text/javascript">

d3.selectAll("span")
  .append("svg")
    .attr("width", 100)
    .attr("height", 100)
  .append("text")
    .attr("x", "50%")
    .attr("y", "50%")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .attr("stroke", "black")
    .attr("stroke-width", 1.5)
    .style("font", "36pt Comic Sans MS")
    .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)")
    .text(function() { return ~~(Math.random() * 100); });

function transform() {
  d3.selectAll("text")
      .text(function() { return ~~(Math.random() * 100); });
}

window.addEventListener("keypress", transform, false);

    </script>
  </body>
</html>
